<template>
    <div>
        <div v-if="queryDetail">
            <el-tabs type="border-card" @tab-click="handlClick" style="width: 90%;margin-left: 60px;">
                <el-tab-pane label="删除案件">
                    <el-row style="margin-top: 20px;">
                        <el-col :span="21" :offset=1>
                            <span style="color: red">*</span><span style="font-size: 18px">案件:</span>
                            <el-input v-model="caseNo" @click.native="showDialog" placeholder="请选择案件" clearable style="margin-top: 10px"></el-input>
                        </el-col>
                        <el-row style="margin-top: 100px">
                            <el-col :span="1" :offset=10>
                                    <el-button v-if="caseNo!==''" @click="deCase" type="primary" style="margin-left: -10px">删除</el-button>
                            </el-col>
                        </el-row>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="案件回收站">
                    <el-row>
                        <el-col :span="3">
                            <el-input v-model="caseLawSearch.searchData" clearable></el-input>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="caseLawSearch.select" filterable placeholder="请选择">
                                <el-option label="委托人搜索" value="1"></el-option>
                                <el-option label="对方当事人搜索" value="2"></el-option>
                                <el-option label="案号搜索" value="3"></el-option>
                                <el-option label="案由搜索" value="4"></el-option>
                                <el-option label="归档号搜索" value="5"></el-option>
                                <el-option label="受理机关搜索" value="6"></el-option>
                                <el-option label="受理法院搜索" value="7"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="caseLawSearch.caseApproveStatus" clearable>
                                <el-option label="审批中" value="1"></el-option>
                                <el-option label="审批通过" value="2"></el-option>
                                <el-option label="审批不通过" value="3"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="caseLawSearch.caseCaseTypeId" filterable placeholder="请选择" clearable>
                        <span v-for="(item,index) in caseTypeData" :key="index">
                            <el-option :value="item.id+''" :label="item.caseTypeName"></el-option>
                        </span>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="caseLawSearch.caseSettleStatus" clearable>
                                <el-option label="已结案" value="Y"></el-option>
                                <el-option label="未结案" value="N"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="caseLawSearch.sortMode">
                                <el-option label="自定义排序" value="1"></el-option>
                                <el-option label="编号倒序" value="2"></el-option>
                                <el-option label="登记时间正序" value="3"></el-option>
                                <el-option label="登记时间倒序" value="4"></el-option>
                                <el-option label="收案时间正序" value="5"></el-option>
                                <el-option label="收案时间倒序" value="6"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="1" :offset=1>
                            <el-button type="primary" @click="seniorSearch">检索</el-button>
                        </el-col>
                    </el-row>
                    <el-table
                            :data="caseList"
                            border
                            style="width: 100%;margin-top: 10px;margin-bottom: 10px"
                            :cell-style="cellStyle">
                            <el-table-column
                                    align="center"
                                    prop="caseNo"
                                    label="案号"
                                    width="149">
                                <template slot-scope="scope">
                                    <a href="javascript:" @click="queryDetails(scope.row.id)">
                                        {{scope.row.caseNo}}
                                    </a>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseWtr"
                                    label="委托人">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseOppositeParties"
                                    label="对方当事人">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseAttorney"
                                    label="承办律师">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseSettleStatus"
                                    label="结案状态"
                                    :formatter="caseSettleStatusFormatter"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseAgencyfee"
                                    label="代理费(元)"
                                    width="103">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="casePaidsal"
                                    label="已付款(元)"
                                    width="103">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseInvoiced"
                                    label="已开票(元)"
                                    width="103">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseApproveStatus"
                                    label="审批状态"
                                    :formatter="caseApproveStatusFormatter"
                                    width="105">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseContract"
                                    label="合同"
                                    :formatter="caseContractFilenumberFormatter"
                                    width="60">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="caseRecord"
                                    label="档案"
                                    :formatter="caseContractFilenumberFormatter"
                                    width="60">
                            </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[1, 5, 10, 20, 50, 100]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
            <el-dialog
                    title="请选择案件"
                    :visible.sync="getCase"
                    width="50%">
                <!--                    :before-close="handleClose"-->
                <span>
                    <el-table
                            empty-text="暂时没有数据哟~"
                            @row-click="rowClick"
                            :data="caseApproveList"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="caseNo"
                                label="案号">
                        </el-table-column>
                        <el-table-column
                                prop="caseWtr"
                                label="委托人">
                        </el-table-column>
                        <el-table-column
                                prop="caseOppositeParties"
                                label="对方当事人">
                        </el-table-column>
                        <el-table-column
                                prop="caseAgencyfee"
                                label="代理费">
                        </el-table-column>
                        <el-table-column
                                prop="caseAttorney"
                                label="承办律师">
                        </el-table-column>
                        <el-table-column
                                prop="collectionTime"
                                label="收案日期">
                        </el-table-column>
                    </el-table>
                </span>
                <span slot="footer" class="dialog-footer">
<!--                    <el-button @click="getLawyersList = false">取 消</el-button>-->
                    <el-button type="primary" @click="getCase = false">取 消</el-button>
                </span>
            </el-dialog>
        </div>
        <div v-if="!queryDetail">
            <CaseDetails :case-id="caseId" case-recycle="N" @back="back"></CaseDetails>
        </div>
    </div>
</template>

<script>
    import AddCaseService from "../../model/AddCaseService";
    import CaseDetails from "./CaseDetails";

    const addCaseService=AddCaseService.getInstance();
    export default {
        name: "ManagerCase",
        components:{
            CaseDetails
        },
        data(){
            return{
                queryDetail:true,//查看案件详情
                caseNo:"",//案号
                caseId:"",//案件Id
                caseApproveList:[],//审批未通过的案件
                caseList:[],//回收站的案件
                getCase:false,

                total:"",//数据总条数
                pageSize:5,//每页显示条数
                pageNum:1,//当前页

                caseLawSearch:{
                    searchData:"",//搜索框数据
                    select:"",//下拉框选项
                    caseApproveStatus:"",//审批状态
                    caseCaseTypeId:"",//案件类型
                    caseSettleStatus:"",//结案状态
                    sortMode:"1",//排序方法
                },
            }
        },
        created() {
            this.init();
            this.queryCase()
        },
        methods:{
            handlClick(tab){//标签页切换
                this.caseLawSearch.searchData="";//搜索框数据
                this.caseLawSearch.caseApproveStatus="";//审批状态
                this.caseLawSearch.caseCaseTypeId="";//案件类型
                this.caseLawSearch.caseSettleStatus="";//结案状态
                this.caseLawSearch.sortMode="1";//排序方法
                this.pageSize=5;
                if(tab.index==="1"){
                    this.queryCase(null)
                }
            },
            deCase(){//删除案件
                this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$loading({//懒加载
                        lock: true,
                        text: '正在查询...',
                        spinner: 'fa fa-refresh fa-spin fa-3x',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    const param=new URLSearchParams();
                    param.append("id",this.caseId);
                    param.append("caseRecycle","N");
                    addCaseService.upCaseLaw(this.$http,param).then(()=>{
                        this.$loading().close()
                    });
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.caseNo=""
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            seniorSearch(){//高级检索
                this.pageSize=5;
                this.queryCase(null);
            },
            handleCurrentChange(val){//当前页发生变化
                const page={
                    pageNum:val
                };
                this.queryCase(page)
            },
            handleSizeChange(val){//每页数据条数变化
                    const page={
                        pageSize:val
                    };
                    this.queryCase(page)
            },
            queryDetails(id){//查看案件详情
                this.caseId=id;
                this.queryDetail=false;
            },
            back(){//返回按钮
                this.queryDetail=true;
                this.querySummaryCases(null)
            },
            cellStyle(column){//单元格样式
                if (column.columnIndex===9||column.columnIndex===10){
                    return "color:red;font-size:20px"
                }
            },
            caseContractFilenumberFormatter(row, column, cellValue){//合同，档案
                if(cellValue==="1"){
                    return "✘"
                }else{
                    return "✔"
                }
            },
            caseSettleStatusFormatter(row, column, cellValue){//结案状态
                if(cellValue==="N"){
                    return "未结案"
                }else{
                    return "已结案"
                }
            },
            caseApproveStatusFormatter(row, column, cellValue){//审批状态
                if(cellValue==="1"){
                    return "审批中"
                }else if(cellValue==="2"){
                    return "审批通过"
                }else{
                    return "审批不通过"
                }
            },
            showDialog(){//显示对话框
                    this.getCase=true
            },
            rowClick(row){//案件表格点击事件//, column, event
                this.caseId=row.id;
                this.caseNo=row.caseNo;
                this.getCase=false;
            },
            init(){
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                const params={
                    caseApproveStatus:"3"
                };
                addCaseService.querySenior(this.$http,params).then(msg=>{
                    this.caseApproveList=msg.data.data.list;
                });
            },
            queryCase(param){
                this.$loading({//懒加载
                    lock: true,
                    text: '正在查询...',
                    spinner: 'fa fa-refresh fa-spin fa-3x',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                const params={
                    caseRecycle:"N",
                    searchData:this.caseLawSearch.searchData,//搜索框数据
                    select:this.caseLawSearch.select,//下拉框选项
                    caseApproveStatus:this.caseLawSearch.caseApproveStatus,//审批状态
                    caseCaseTypeId:this.caseLawSearch.caseCaseTypeId,//案件类型
                    caseSettleStatus:this.caseLawSearch.caseSettleStatus,//结案状态
                    sortMode:this.caseLawSearch.sortMode,//排序方法
                    pageNum:param==null?this.pageNum:(param.pageNum===undefined?this.pageNum:param.pageNum),
                    pageSize:param==null?this.pageSize:(param.pageSize===undefined?this.pageSize:param.pageSize)
                };
                addCaseService.querySenior(this.$http,params).then(msg=>{
                    this.caseList=msg.data.data.list;
                    this.total=msg.data.data.total;
                    this.pageSize=msg.data.data.pageSize;
                    this.$loading().close();
                });
            }
        }
    }
</script>

<style scoped>

</style>